<template>
	<div id="app">
		<TextareaAutoHeight :value="value"/>
		{{value}}
		<InputPowerful v-model="value2"
					   :validator="validator"
					   :formatter="formatter"/>
		{{value2}}
		<InputPowerful v-model="value3"
					   wrap="TextareaAutoHeight"
					   :validator="validator"
					   :formatter="formatter"/>
		{{value3}}
		<SizeObserver style="height:30px;width:15vw;border:1px solid;display:inline-block;"
					  @bear-resize="resizeFn">
			<div>测试大小监听容器</div>
		</SizeObserver>
		<TableTree
				ref="TableTree"
				:columns="columns"
				:extend-key="extendKey"
				:data="data"
				:select-cell="selectCell"
				:select-line="selectLine"
				@click-cell="clickCell"
				@add-cell="addCell"
				@remove-cell="removeCell"
				:style="{height:height+'px'}"/>
		<TablePowerful border :columns="columns1" :data="data1" style="height:200px;">
			<template #money="prop">
				{{prop.row[prop.column.key]|moneyFormat}}
			</template>
		</TablePowerful>
		<PieChart style="width:15vw;height:15vw;margin-right:1vw;float:left"
				  solid
				  center-title="标题"
				  :data="chartData"
				  :formatter="formatter"
				  @click-center="clickCenter"
				  @click-chart="clickChart"/>
		<LineChart style="width:39vw;height:15vw;margin-right:1vw;float:left"
				   x-percent="横向"
				   y-percent="纵向"
				   axis-name="金额"
				   :data="chartData2"
				   :formatter="formatter"
				   :axis-formatter="axisFormatter"
				   :x-axis="xAxis"
				   @click-chart="clickChart"/>
		<BarChart  style="width:25vw;height:15vw;float:left"
				   renderer="canvas"
				   simple
				   x-percent="横向"
				   y-percent="纵向"
				   axis-name="金额"
				   :data="chartData3"
				   :formatter="formatter"
				   :axis-formatter="axisFormatter"
				   :x-axis="xAxis3"
				   @click-chart="clickChart"/>
		<FunnelChart style="width:15vw;height:15vw;margin-right:1vw;float:left;border:1px solid"
					 :data="chartData"
					 :formatter="formatter"/>
		<StepContainer style="height:300px;clear:both;">
			<StepContainerItem name="HIS服务器" icon="ios-globe-outline">
				<div id="singleElement">tippy提示</div>
			</StepContainerItem>
			<StepContainerItem name="HIS科室对照" icon="ios-globe-outline">页面2</StepContainerItem>
			<StepContainerItem name="HIS收费项目对照" icon="ios-globe-outline">页面3</StepContainerItem>
			<StepContainerItem name="HIS药品耗材对照" icon="ios-globe-outline">页面4</StepContainerItem>
			<StepContainerItem name="HIS数据采集策略" icon="ios-globe-outline">页面5</StepContainerItem>
		</StepContainer>
		<UploadView style="border:1px solid;" :default-file-list="images"/>
		<TextEllipsis style="width:15vw;"
					  :line="TextEllipsis"
					  value="浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分"/>
	</div>
</template>

<script>
	import 'view-design/dist/styles/iview.css';
	import './dependence';
	import Vue from 'vue';
	import utils from './import-utils';
	import template from './import-vue-template';
	console.log(utils);
	Vue.use(template);
	export default{
		name:'App',
		filters:{
			moneyFormat:function(val){
				return utils.moneyFormat({mu_basenum:1,mu_point:2},val);
			}
		},
		data(){
			return {
				value:'',
				value2:'',
				value3:'',
				columns:[
					{title:'标题1',key:'attr1',width:200,merge:true,align:'center'},
					{title:'标题2',key:'attr2',width:200,merge:true},
					{title:'标题3',key:'attr3',width:200,operation:true,formatter(val){ return '格式化以后:'+val; }},
					{
						title:'标题4',
						key:'attr4',
						width:'10%+50',
						default:0,
						edit:'text',
						on:{
							input(){
								console.log('input');
							}
						},
						formatter:this.formatter,
						validator(cell,val){ return /^(?:\d|[1-9]\d+)(?:\.\d{1,2})?$/.test(val); },
						required:true
					},
					{title:'标题5',key:'attr5',width:'2fr+50',edit:'textarea'},
					{title:'标题6',key:'attr6',width:'1fr',default:0,edit:'textarea',formatter:this.formatter,validator(cell,val){ return /^(?:\d|[1-9]\d+)(?:\.\d{1,2})?$/.test(val); }}
				],
				extendKey:{extend1:0,extend2:'',extend3:{a:0,b:''}},
				data:[
					{attr1:'1',attr2:'1-1',attr3:'1-1-1',attr4:'',attr5:'',extend1:'10',extend2:'100',extend3:{a:'10',b:'100'}},
					{attr1:'1',attr2:'1-1',attr3:'1-1-2',attr4:'',attr5:''},
					{attr1:'1',attr2:'1-2',attr3:'1-2-1',attr4:'',attr5:''},
					{attr1:'1',attr2:'1-2',attr3:'1-2-2',attr4:'',attr5:''},
					{attr1:'2',attr2:'2-1',attr3:'2-1-1',attr4:'',attr5:''},
					{attr1:'2',attr2:'2-1',attr3:'2-1-2',attr4:'',attr5:''},
					{attr1:'2',attr2:'2-2',attr3:'2-2-1',attr4:'',attr5:''},
					{attr1:'2',attr2:'2-2',attr3:'2-2-2',attr4:'',attr5:''}
				],
				selectCell:true,
				selectLine:true,
				cell:null,
				chartData:[
					{name:'来源1来源1来源1',value:1000},
					{name:'来源2来源2来源2',value:2000},
					{name:'来源3来源3来源3',value:1400},
					{name:'来源4来源4来源4',value:400}
				],
				chartData2:[
					{
						name:'月度收入',
						value:[100,120,90,80,160,110,100,120,90,80,160,110],
						stack:'总量'
					},{
						name:'月度支出',
						value:[180,130,60,90,150,180,180,130,60,90,150,180],
						stack:'总量'
					}
				],
				chartData3:[
					{
						name:'月度收入',
						value:[100,200,300,400]
					}
				],
				xAxis:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
				xAxis3:['1月','2月','3月','4月','5月'],
				columns1:[
					{title:'项目名称',key:'attr1',width:300},
					{title:'经费预算',slot:'money',key:'attr2',width:'20%+50+1fr'},
					{title:'经费收入',slot:'money',key:'attr3',width:'1fr'}
				],
				data1:[
					{attr1:'项目1',attr2:10000,attr3:32355},
					{attr1:'项目2',attr2:10000,attr3:32355},
					{attr1:'项目3',attr2:10000,attr3:32355},
					{attr1:'项目4',attr2:10000,attr3:32355},
					{attr1:'项目2',attr2:10000,attr3:32355},
					{attr1:'项目3',attr2:10000,attr3:32355},
					{attr1:'项目4',attr2:10000,attr3:32355},
					{attr1:'项目2',attr2:10000,attr3:32355},
					{attr1:'项目3',attr2:10000,attr3:32355},
					{attr1:'项目4',attr2:10000,attr3:32355},
					{attr1:'项目2',attr2:10000,attr3:32355},
					{attr1:'项目3',attr2:10000,attr3:32355},
					{attr1:'项目4',attr2:10000,attr3:32355},
					{attr1:'项目5',attr2:10000,attr3:32355}
				],
				height:200,
				images:[
					{url:require('./assets/logo.png')},
					{url:require('./assets/1.png')},
					{url:require('./assets/2.png')},
					{url:require('./assets/3.png')}
				],
				TextEllipsis:3
			};
		},
		mounted(){
			utils.tippy('#singleElement',{
				content:'Tooltip',
				animation:'scale',
				hideOnClick:false,
				ignoreAttributes:true
			});
		},
		methods:{
			formatter(val){
				return val!==''?utils.moneyFormat({mu_basenum:1,mu_point:2},val):'';
			},
			axisFormatter(val){
				return this.formatter(val)+'元';
			},
			validator(val){
				if(/^(?:\d|[1-9]\d+)(?:\.\d{1,2})?$/.test(val)){
					return true;
				}else{
					return '失败!!!!';
				}
			},
			clickCell(cell){
				console.log('点击:',cell);
				this.cell=cell;
			},
			addCell(cell){
				this.$refs.TableTree.insertSibling(cell,'');
			},
			removeCell(cell){
				this.$refs.TableTree.deleteRow(cell);
			},
			resizeFn(data){
				console.log(data);
			},
			clickCenter(){
				console.log('点击中心');
			},
			clickChart(data){
				console.log(data);
			}
		}
	};
</script>

<style lang="scss">
	#app{
		padding:10px 1vw 500px;
		overflow:auto;
		height:100%;
	}
	#singleElement{
		background:red;
		width:100px;
		height:100px;
		color:#fff;
	}
</style>
